// import { useState } from 'react';
// import { Card, Input, Button, List, message } from 'antd';
// import axios from 'axios';
//
// export default function DeepSeekAssistant() {
//     const [query, setQuery] = useState('');
//     const [response, setResponse] = useState(null);
//     const [loading, setLoading] = useState(false);
//
//     const handleAsk = async () => {
//         if (!query.trim()) return message.warning('请输入您的问题');
//
//         setLoading(true);
//         try {
//             const res = await axios.post('http://localhost:5000/ai-helper', {
//                 query: query
//             });
//
//             setResponse({
//                 answer: res.data.answer,
//                 quickActions: res.data.quick_actions
//             });
//         } catch (err) {
//             message.error('服务请求失败，请稍后重试');
//         } finally {
//             setLoading(false);
//         }
//     };
//
//     return (
//         <Card
//             title="🎧 DeepSeek 音乐助手"
//             style={{ marginTop: 20, borderRadius: 12 }}
//             headStyle={{ background: '#1677ff', color: 'white' }}
//         >
//             <div style={{ maxWidth: 800, margin: '0 auto' }}>
//                 <Input.Search
//                     placeholder="例如：我需要一些适合编程时听的音乐"
//                     enterButton={<Button type="primary">发送</Button>}
//                     value={query}
//                     onChange={(e) => setQuery(e.target.value)}
//                     onSearch={handleAsk}
//                     loading={loading}
//                     size="large"
//                 />
//
//                 {response && (
//                     <div style={{ marginTop: 24 }}>
//                         <div style={{
//                             padding: 16,
//                             background: '#f8f9fa',
//                             borderRadius: 8,
//                             lineHeight: 1.7
//                         }}>
//                             {response.answer}
//                         </div>
//
//                         <div style={{ marginTop: 16 }}>
//                             <h4>快速操作：</h4>
//                             <List
//                                 dataSource={response.quickActions}
//                                 renderItem={item => (
//                                     <List.Item>
//                                         <Button
//                                             type="link"
//                                             style={{ paddingLeft: 0 }}
//                                             onClick={() => setQuery(item)}
//                                         >
//                                             {item}
//                                         </Button>
//                                     </List.Item>
//                                 )}
//                             />
//                         </div>
//                     </div>
//                 )}
//             </div>
//         </Card>
//     );
// }

import { useState } from 'react';
import { Card, Input, Button, List, message } from 'antd';
import axios from 'axios';

export default function DeepSeekAssistant() {
    const [query, setQuery] = useState('');
    const [response, setResponse] = useState(null);
    const [loading, setLoading] = useState(false);

const handleAsk = async () => {
    if (!query.trim()) {
        message.warning('请输入有效问题');
        return;
    }

    setLoading(true);
    try {
        const startTime = Date.now();
        const res = await axios.post('http://localhost:5000/ai-helper',
            { query: query },
            {
                headers: {
                    'Content-Type': 'application/json',
                    'X-Request-ID': Math.random().toString(36).substr(2, 9)
                },
                timeout: 15000,  // 15秒超时
                validateStatus: (status) => status < 500  // 不抛出500错误
            }
        );

        const latency = Date.now() - startTime;
        console.log(`请求耗时: ${latency}ms`, res.data);

        if (res.status >= 400) {
            throw new Error(res.data.error || `请求失败 (${res.status})`);
        }

        setResponse({
            answer: res.data.answer,
            quickActions: res.data.quick_actions
        });
    } catch (err) {
        console.error('请求详情:', {
            error: err.message,
            config: err.config,
            response: err.response?.data
        });
        message.error(err.message);
    } finally {
        setLoading(false);
    }
};

    return (
        <Card
            title="🎵 智能音乐助手"
            style={{ marginTop: 20 }}
            headStyle={{ background: '#1890ff', color: 'white' }}
        >
            <Input.Search
                placeholder="例如：推荐适合编程时听的歌单"
                enterButton={<Button type="primary">智能搜索</Button>}
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                onSearch={handleAsk}
                loading={loading}
                size="large"
            />

            {response && (
                <div style={{ marginTop: 20 }}>
                    <div className="ai-response">
                        {response.answer.split('\n').map((line, i) => (
                            <p key={i}>{line}</p>
                        ))}
                    </div>

                    <div style={{ marginTop: 15 }}>
                        <h4>快速操作：</h4>
                        <List
                            dataSource={response.quickActions}
                            renderItem={item => (
                                <List.Item>
                                    <Button
                                        type="link"
                                        style={{ paddingLeft: 0 }}
                                        onClick={() => setQuery(item)}
                                    >
                                        {item}
                                    </Button>
                                </List.Item>
                            )}
                        />
                    </div>
                </div>
            )}
        </Card>
    );
}